import styles from './index.module.scss';
import React, { useState } from 'react';
import { Layout, Button, Dropdown, Menu, Modal, Tooltip, message } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined, DownOutlined } from '@ant-design/icons';
import envConfig from 'src/env/env.config';
import { getEnv } from 'src/libs/utils';

const { Header } = Layout;

interface IProps {
	isCollapsed: boolean;
	handleCollapsed: ( bool: boolean ) => void;
	userInfo: any;
	systemId: string;
	biHelpDocInfo: any;
}

//	用户信息下拉菜单
function menuComponent( isModalVisible, setModalVisible ) {

	const handleOk = () => {
		const logoutUrl = window.location.href.indexOf( 'localhost' ) > -1 ? 'http://localhost:3001' : '';
		window.location.replace( `${ logoutUrl }/logout` );
	};

	const handleCancel = () => {
		setModalVisible( false );
	};

	const handleQuit = () => {
		setModalVisible( true );
	};

	return (
		<>
			<Menu>
				<Menu.Item onClick={ handleQuit }>
					<span>退出</span>
				</Menu.Item>
			</Menu>
			<Modal
				title="消息提示"
				visible={ isModalVisible }
				onOk={ handleOk }
				onCancel={ handleCancel }
				okText='确定'
				cancelText='取消'
			>
				<p>是否确认退出登录？</p>
			</Modal>
		</>

	);
}


const HeaderComponent = ( props: IProps ) => {
	const { userInfo, biHelpDocInfo } = props;
	const [ isModalVisible, setModalVisible ] = useState( false );

	const toHelpDoc = async () => {
		const env = getEnv();

		if ( env ) {
			const { systemId = '' } = biHelpDocInfo;
			window.location.href = `${envConfig[env].helpDocUrl}?systemId=${systemId}`;
		} else {
			message.error( '地址不存在' );
		}
	};

	return (
		<Header className={ styles.header }>
			<div className={ styles.logo }>
				<img width={ 115 } src={ require( 'src/assets/img/logo_deloitte.png' ) } alt=""/>
				<img width={ 128 } src={ require( 'src/assets/img/BDH_wordmark_white.png' ) } alt=""/>
				<Tooltip placement="bottom" title={ props.isCollapsed ? '展开菜单栏' : '关闭菜单栏' }>
					<Button
						type="text" icon={ props.isCollapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/> }
						onClick={ () => props.handleCollapsed( !props.isCollapsed ) }></Button>
				</Tooltip>

				<span>首页</span>
				<span>工作台</span>
			</div>

			{
				userInfo && (
					<div className={ styles.user_info }>

						<div className={ styles.tenant_container }>
							<img src={ userInfo.tenantImage } alt=""/>
						</div>
						<div className={ styles.avatar_container }>
							<img src={ userInfo.userImage } alt=""/>
						</div>
						<div className={ styles.helpdoc_container }>
							<span
								title='帮助中心' className={ `iconfont bdhwenhao ${ styles.helpdocIcon }` }
								onClick={ toHelpDoc }></span>
						</div>
						<Dropdown overlay={ menuComponent( isModalVisible, setModalVisible ) }>
							<span className={ styles.username }>
								{ userInfo.fullName }
								<DownOutlined style={ { marginLeft: '5px' } }/>
							</span>
						</Dropdown>
					</div>
				)
			}

		</Header>
	);
};

export default React.memo( HeaderComponent );
